import Vue from 'vue'
import router from './router'
import App from './App.vue'
import ElementUI from 'element-ui'
import Element from 'element-ui'
import 'babel-polyfill'
import VueShowdown from 'vue-showdown'
import VueHighlightJS from 'vue-highlightjs'
import hljs from 'highlight.js'
import VueClipboard from 'vue-clipboard2'
import VueResource from 'vue-resource'
import i18n from './vue-i18n.js'
import demoBlock from './components/demo-block'
import Global from './utils/global'
import './utils/icons'
import 'element-ui/packages/theme-chalk/src/index.scss'
import './styles/site.scss'
import './useHotentUi.js'
import './plugins/vant.js'
import './plugins/rem.js'

Vue.component('demo-block', demoBlock)

Vue.config.productionTip = false
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value),
})

Vue.use(Element, { size: 'medium' })
Vue.use(VueShowdown, {
  options: {
    tables: true,
  },
})
Vue.use(VueResource)
Vue.use(VueHighlightJS)
Vue.use(VueClipboard)
Vue.use(Global)

router.afterEach(() => {
  // https://github.com/highlightjs/highlight.js/issues/909#issuecomment-131686186
  Vue.nextTick(() => {
    const blocks = document.querySelectorAll('pre code:not(.hljs)')
    if (blocks && blocks.length > 0) {
      blocks.forEach((block) => hljs.highlightElement(block))
    }
  })
})

var app = new Vue({
  router,
  i18n,
  render: (h) => h(App),
}).$mount('#app')

let validateLocal = localStorage.getItem('lang')
let currentLocal = validateLocal || 'zh-CN'
app && app.$validator && app.$validator.localize(currentLocal)
